<script setup>
import {onMounted, ref, reactive} from 'vue'
import * as THREE from 'three';
 
 
//加载自定义3D模型
// 引入gltf模型加载库GLTFLoader.js
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
//加载OBJ3D
import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader'
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader"
 
const three9038 = "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb";
//创建场景载体
const scene = new THREE.Scene();
const loader = new GLTFLoader();//三维模型加载器
const model = new THREE.Group(); //声明一个组对象，用来添加加载成功的三维场景
 
const data = reactive({
  index: 2,
  x: 5,
  y: 5,
  z: 5,
  isHelper: false,//是否开启了辅助线
  isAutoRotate: false,//是否开启了自动旋转
})
 
 
const mtlLoader2 = new MTLLoader()
const objLoader2 = new OBJLoader()
 
 
//辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(100);
 
//光源设置
 const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(92, 100, 100);
scene.add(directionalLight);
// const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5);
// directionalLight2.position.set(-92, -100, -100);
// scene.add(directionalLight2);
const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight2.position.set(50, 100, -100);
scene.add(directionalLight2);
//渲染器和相机
const width = window.innerWidth;
const height = width / 1.5 > 500 ? 500 : width / 1.5;
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(150, 300, 200);
camera.lookAt(0, 0, 0);
 
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);//画布颜色
renderer.setSize(width, height);
renderer.antialias = true;
renderer.alpha = true;
renderer.precision = 'mediump'
renderer.setPixelRatio(window.devicePixelRatio);
//解决加载gltf格式模型颜色偏差问题
renderer.outputEncoding = THREE.sRGBEncoding;
 
// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// controls.maxPolarAngle = 1.5 // 上下翻转的最大角度
// controls.minPolarAngle = -1.5 // 上下翻转的最小角度
 
 
// 渲染循环
function render() {
  renderer.render(scene, camera);
  if (data.isAutoRotate) {
    controls.autoRotate = true // 是否自动旋转
    controls.update();
  } else {
    controls.autoRotate = false // 是否自动旋转
  }
  const id = requestAnimationFrame(render);
  // console.log("render--->" + id)
 
}
 
render();
 
// 画布跟随窗口变化
window.onresize = function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
};
 
defineProps({
  msg: '上面传下来的',
})
 
function addUI() {
  console.log("开始加载渲染-->")
  document.getElementById('webgl1').appendChild(renderer.domElement);
  document.getElementById('webgl1').addEventListener('click', function (e) {
 
    console.log("x------>" + camera.position.x)
    console.log("y------>" + camera.position.y)
    console.log("z------>" + camera.position.z)
 
    // data.x = camera.position.x + 1;
    // data.y = camera.position.y;
    // data.z = camera.position.z;
    // camera.position.set(data.x, data.y, data.z); //x轴方向观察
    // camera.lookAt(0, 0, 0); //重新计算相机视线方向
  })
}
 
onMounted(() => {
  addUI();
  helperControl(false);
  autoRotateControl(true);
  draw3D();
})
 
//辅助函数
function helperControl(isOpen) {
  if (data.isHelper === isOpen) return;
  data.isHelper = isOpen;
  if (data.isHelper) {
    scene.add(axesHelper);
  } else {
    scene.remove(axesHelper);
  }
}
 
function autoRotateControl(isOpen) {
  console.log("----->" + isOpen);
  if (data.isAutoRotate === isOpen) return;
  data.isAutoRotate = isOpen;
}
 
 
function draw3D() {
  data.index++;
  if (data.index === 1) {
    mtlLoader2.load('../../views/model/RobotExpressive.glb', material => {
      material.preload()
      //mtl文件中的材质设置到obj加载器
      console.log(material.materials)
      objLoader2.setMaterials(material)
      objLoader2.load(
          '../../static/9038.obj',
          loadedMesh => {
            console.log(loadedMesh)
            //设置模型大小
            loadedMesh.scale.set(1, 1, 1)
            //设置模型位置
            loadedMesh.position.set(5, 5, 5);
            scene.add(loadedMesh)
            camera.position.set(400, 400, 400);
          }
      )
    })
  } else if (data.index === 2) {
    // 加载gltf/glb三维模型
    loader.load('../../views/model/RobotExpressive.glb', function (gltf) {
      console.log('gltf load ---->', gltf.scene);
      model.add(gltf.scene);
    })
    scene.add(model); // 模型对象添加到场景中
    camera.position.set(data.x, data.y, data.z);
  } else if (data.index === 3) {
    // 加载gltf/glb三维模型
    loader.load(three9038, function (gltf) {
      console.log('gltf load ---->', gltf.scene);
      model.add(gltf.scene);
    })
    scene.add(model); // 模型对象添加到场景中
  }
}
</script>
 
<template>
    <div  style="margin-left: 0; width: 200px; height: 500px;">
  <div id="webgl1" class="divThree" style="height: 100px;;"></div>
  <br>
  <button @click="helperControl(true)">开启坐标辅助线</button>
  <button @click="helperControl(false)">关闭坐标辅助线</button>
  <button @click="autoRotateControl(true)">开启自动旋转</button>
  <button @click="autoRotateControl(false)">停止自动旋转</button>
  
    </div>
</template>
 
<style scoped>
root {
  padding: 0px;
}
 
.divThree {
  width: -100px;
  margin-left: -200px;
  height: 100px;
  align-items: center;
  margin: 0px auto;
  background-color: rgb(22, 132, 22);
}
 
button {
  margin-left: 1em;
  margin-top: 1em;
}
</style>